<%@ page import="com.xju.entity.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-image: url('static/images/background.jpg');
            background-size: cover;
            background-position: center;
            color: white;
        }

        header {
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px 0;
            text-align: center;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            display: inline-block;
        }

        nav li {
            display: inline;
            margin: 0 20px;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-size: 18px;
        }

        .product-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px;
        }

        .product-item {
            border: 1px solid #ddd;
            margin: 10px;
            padding: 20px;
            width: 200px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .product-item img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            width: 150px; /* 设置固定宽度 */
            height: 150px; /* 设置固定高度 */
        }

        .product-item h3 {
            margin: 10px 0;
        }

        .product-item p {
            margin: 5px 0;
        }

        .product-item button {
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }

        .product-item button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
<header>
    <h1>电子商务系统 - 产品列表</h1>
    <nav>
        <ul>
            <li><a href="index.jsp">首页</a></li>
            <li><a href="ProductListServlet">产品列表</a></li>
            <%
                User user = (User) session.getAttribute("user");
                if (user != null) {
            %>
            <li><a href="cart.jsp">购物车</a></li>
            <%
                }
            %>
            <%
                if (user == null) {
            %>
            <li><a href="login.jsp">登录</a></li>
            <li><a href="register.jsp">注册</a></li>
            <%
            } else {
            %>
            <li>
                <div class="user-profile">
                    <img src="static/images/user.png" alt="User Profile" class="profile-img">
                    <div class="user-menu">
                        <a href="myinfo.jsp">我的信息</a>
                        <a href="logout.jsp">退出登录</a>
                        <a href="orders.jsp">我的订单</a>
                    </div>
                </div>
            </li>
            <%
                }
            %>
        </ul>
    </nav>
</header>
<main>
    <section class="product-list">
        <c:forEach var="product" items="${products}">
            <div class="product-item">
                <img src="static/images/product${product.id}.jpg" alt="Product ${product.id}">
                <h3>${product.name}</h3>
                <p>价格: $${product.price}</p>
                <button onclick="addToCart(${product.id})">加入购物车</button>
            </div>
        </c:forEach>
    </section>
</main>
<footer>
    <p>&copy; 2023 电子商务系统. All rights reserved.</p>
</footer>
<script>
    function addToCart(productId) {
        window.location.href = "CartServlet?action=add&productId=" + productId;
    }
</script>
<%
    String checkoutMessage = (String) session.getAttribute("checkoutMessage");
    if (checkoutMessage != null) {
%>
<div class="message success"><%= checkoutMessage %></div>
<%
    session.removeAttribute("checkoutMessage");
%>
<%
    }
%>
</body>
</html>
